<script>
import { getOrderPage } from "@/api/modules/order";

export default {
  computed: {
    userInfo() {
      return this.$store.getters.userInfoGetter;
    },
  },
  data() {
    return {
      params: {
        carNo: "",
        startTime: "",
        endTime: "",
        time: "",
        size: 10,
        current: 0,
      },
      showPicker: false,
      refreshing: false,
      loading: false,
      finished: false,
      loadData: [],
      minDate: new Date(2010, 0, 1),
      maxDate: new Date(),
    };
  },
  methods: {
    onload() {
      this.params.current++;
      this.getInitFn();
    },
    onSearch(val) {
      this.params.carNo = val;
      this.onRefresh();
    },

    onCancel() {
      if (!this.params.carNo) return;
      this.params.carNo = "";
      this.onRefresh();
    },
    onCancelTime() {
      this.params.startTime = "";
      this.params.endTime = "";
      this.params.time = "";
      this.onRefresh();
    },
    confirm(values) {
      const [start, end] = values;
      this.params.startTime = this.$utils.filterTimeFn(
        start.getTime(),
        "YYYY-MM-DD"
      );
      this.params.endTime = this.$utils.filterTimeFn(
        end.getTime(),
        "YYYY-MM-DD"
      );
      this.params.time = `${this.params.startTime} 至 ${this.params.endTime}`;
      this.showPicker = false;
      this.onRefresh();
    },
    async getInitFn() {
      this.loading = true;
      const { code, data } = await getOrderPage({
        ...this.params,
        tollmanId: this.userInfo.id,
      });
      this.loading = false;
      if (this.params.current === 1) this.loadData = [];
      if (code === 200 && data) {
        this.loadData.push(...data.records);
        if (this.loadData.length >= data.total) {
          this.finished = true;
        }
      }
    },
    onRefresh() {
      this.refreshing = true;
      this.params.current = 1;
      this.getInitFn();
      this.refreshing = false;
    },
    routerPush(row) {
      this.$store.commit("setOrderData", row);
      this.$router.push({
        path: "/order_details",
      });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
  },
};
</script>

<template>
  <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
    <van-nav-bar title="订单列表">
      <template #left>
        <span
          style="font-size: 30px; background-color: #06c68a; padding: 4px 0"
          @click="$router.go(-1)"
          class="tc ting-fanhui"
          >返回
        </span>
      </template>
    </van-nav-bar>
    <div class="order_list">
      <div class="order_list-head">
        <div>今日入车流量:0</div>
        <div>今日出车流量:0</div>
      </div>
      <div class="order_list-search">
        <van-search
          left-icon=""
          v-model="params.time"
          placeholder="点击选择时间范围"
          readonly
          @click="showPicker = true"
        >
          <template #right-icon>
            <i class="tc ting-qingchu" @click.stop="onCancelTime"></i>
          </template>
        </van-search>
        <van-search
          left-icon=""
          v-model="params.parkCodeText"
          show-action
          placeholder="请输入车牌号"
          @search="onSearch"
          @cancel="onCancel"
        />
      </div>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onload"
      >
        <div
          style="margin-top: 10px"
          v-for="item in loadData"
          :key="item.id"
          :title="item"
          @click="routerPush(item)"
        >
          <van-cell-group>
            <van-cell title="车牌号" :value="item.carNo" />
            <van-cell title="入车时间" :value="item.inTime" />
            <van-cell title="出车时间" :value="item.outTime" />
            <van-cell title="路段名称" :value="item.roadName" />
            <van-cell title="车位号" :value="item.parkspaceCode" />
          </van-cell-group>
        </div>
      </van-list>
      <van-calendar
        :min-date="minDate"
        :max-date="maxDate"
        type="range"
        @confirm="confirm"
        v-model="showPicker"
      />
    </div>
  </van-pull-refresh>
</template>

<style scoped lang="scss">
.order_list {
  width: 100%;
  padding: 12px;
  box-sizing: border-box;
  min-height: 100vh;

  .order_list-head {
    width: 100%;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 8px 0;
  }

  .order_list-search {
    width: 100%;
    background-color: white;
    margin-top: 10px;
  }
}
</style>
